<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
        <title>详情</title>
        <!-- 引入 FrozenUI -->
        <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"/>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <style type="text/css">
        .layui-textarea {
    min-height: 100px;
    width: 90%;
    height: auto;
    line-height: 20px;
    padding: 6px 6px;
    resize: vertical;
    margin-bottom: 60px;
    }
    div.file{display:inline-block;width:100px;height:20px;line-height:20px;position:relative;overflow:hidden; padding: 4px; background-color: #12B7F5;color:cornsilk;}
    div.file input{position:absolute;left:0px;top:0px;zoom:1;filter:alpha(opacity=0);opacity:0;font-size:20px; margin-left:-240px}
    </style>
    <body>
        <header class="ui-header ui-header-positive ui-border-b">
            <h1>发布帖子</h1>
            <button class="ui-btn" type="button" onclick="logout(this)">退出</button>
        </header>
        <section class="ui-container ui-form">
            <form action="">
                
                <div class="ui-form-item ui-border-b">
                    <label>分类</label>
                    <div class="ui-select">
                        <select id="type">
                            <option value="0">选择类型</option>
                            {{ range.TopicTypeList }}
                            <option value="{{.ID}}">{{.Name}}</option>
                            {{ end }}
                        </select>
                    </div>
                </div>
                <div class="ui-form-item ui-form-item-pure ui-border-b">
                    <label>
                        标题&nbsp;&nbsp;&nbsp;
                    </label>
                    <input type="text" placeholder="" id="title">
                </div>
                <div class=" ui-form-item-pure ui-border-b" >
                    <div class="file"  >上传图片<input class="ui-btn ui-btn-primary" style="color: black;" onchange="upload(this)" id="inputElement" placeholder="找本地图片" name="file" type="file" accept="image/png, image/gif, image/jpeg"  /></div>
                </div>
                <div class="ui-form-item ui-form-item-pure ui-border-b">
                    <label>
                        内容详情
                    </label>
                </div>
                <div class="ui-form-item-pure  ui-border-b">
                    <textarea rows="10"  id="content" class="layui-textarea"></textarea> 
                </div>
                
            </form>
           
        </section>
        
        <footer class="ui-footer ui-footer-btn">
            <button class="ui-btn-lg ui-btn-primary" onclick="setreg()">
                提交
            </button>
        </footer>
<script>
    var imgfilepath = new Array();
    function setreg(){
        var ttype = document.getElementById("type").selectedIndex;
        var title = document.getElementById("title").value;
        var content = document.getElementById("content").value;
        console.log(imgfilepath);
        if (title == "" || content == "" || ttype == 0){
            alert("请填写必要项");
            return false;
        }
        axios({
            method: 'post',
            url: '/topic/add',
            data: 'type=' + ttype + '&title=' + title + '&content=' + content + "&imglist=" + imgfilepath,
        }).then(function(response) {
            console.log(response.data);
        });
    }

    function  upload(oDom){
        let inputElement = document.getElementById("inputElement");
        let file = inputElement.files[0];

        let param = new FormData(); // 创建form对象
        param.append("file", file); // 通过append向form对象添加数据

        let config = {
        headers: { "Content-Type": "multipart/form-data" }
        };
        
       axios.post("/uploadimg", param, config).then(function(response) {
            let mimg = document.getElementById("mimg");
            if (response.data.path != ""){
                oDom.parentNode.parentNode.innerHTML += '<div class=" ui-list-img-vertical"> \
                        <span style="background-image:url(' + response.data.path + ')"></span> \
                    </div>';
                imgfilepath.push(response.data.path);
            }
            
        });
        
    }
    function logout(oDom){
        axios({
            method: 'post',
            url: '/logout',
        }).then(function(response) {
            if (response.data.status == 1){
                oDom.remove();
                location.href = "/login";
            };
        });
    }
</script>
    </body>
</html>